<template>
	<view class="homepage">
		<u-sticky bgColor="#fff">
			<u-tabs :list="list1" @change="changeTabs"></u-tabs>
		</u-sticky>

		<!-- 修改scroll-view的样式和属性 -->
		<scroll-view 
			scroll-y="true" 
			@scrolltolower="onScrollToLower"
			class="scroll-view"
			:style="{height: scrollViewHeight}"
		>
			<view class="movie-list">
				<view class="movie-item" v-for="(movie, index) in movieList" :key="index" @click="goToDetail(movie.movieId)">
					<u-image :src="movie.coverUrl" width="340rpx" height="400rpx" radius="8"></u-image>
					<view class="movie-info">
						<text class="movie-name">{{movie.title}}</text>
						<text class="movie-meta">{{movie.director}} | {{movie.actors}}</text>
						<text class="movie-desc">{{movie.description}} | {{movie.actors}}</text>
						<view class="movie-score">
							<u-rate :value="movie.rating/2" readonly size="15"></u-rate>
							<text class="score-text">{{movie.rating}}分</text>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" nomoreText="没有更多电影了" />
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			API: getApp().globalData().API,
			list1: [
				{
					name: '全部'
				},
				{
					name: '排行'
				},
				{
					name: '影评'
				}
			],
			movieList: [
				// ... 更多电影数据
			],
			currentPage: 1,
			pageNum: 6, //每次展示六条数据
			loading: false, // 添加加载状态
			hasMore: true,  // 是否还有更多数据
			scrollViewHeight: '0px',
			status: 'none'
		}
	},
	methods: {
		// 修改查询方法，支持分页
		queryAllMovies(isLoadMore = false) {
			if (this.loading || (!isLoadMore && !this.hasMore)) {
				return;
			}
			
			this.loading = true;
			let that = this;
			uni.request({
				url: that.API + '/movies/getAllMoviesByPage',
				data: {
					pageNum: that.currentPage,
					pageSize: that.pageNum
				},
				success(res) {
					const data = res.data.data;
					if (isLoadMore) {
						// 加载更多时，追加数据
						that.movieList = [...that.movieList, ...data.list];
					} else {
						// 首次加载或刷新时，替换数据
						that.movieList = data.list;
					}
					
					// 更新分页状态
					that.hasMore = data.hasNextPage;
					if(!data.hasNextPage){
						that.status = 'normore'
					}
					if (that.hasMore) {
						that.currentPage++;
					}
				},
				complete() {
					that.loading = false;
				}
			})
		},
		
		onScrollToLower() {
			if(this.hasMore){
				this.status = 'loading'
			}
			// 触发加载更多
			this.queryAllMovies(this.hasMore);
		},
		changeTabs(obj) {
			if (obj.name == '全部') {
				// 切换标签时重置状态
				this.currentPage = 1;
				this.hasMore = true;
				this.queryAllMovies();
			}
			if(obj.name == '排行'){
				this.movieList = []
				this.ranking()
			}
		},
		ranking(){
			//电影排行
			let that = this;
			uni.request({
				url: that.API + '/movies/getTopMovie',
				method: 'GET',
				success(res){
					that.movieList = res.data.data
				}
			})
		},
		goToDetail(movieId){
			uni.navigateTo({
			    url: `/pages/moviedetail/moviedetail?id=${movieId}`
			})
		}
	},
	onLoad() {
		// 获取系统信息
		const info = uni.getSystemInfoSync()
		// 获取状态栏高度
		const statusBarHeight = info.statusBarHeight
		// 设置scroll-view高度
		this.scrollViewHeight = `calc(100vh - ${statusBarHeight}px - 44px)`
		
		this.queryAllMovies()
	},
}
</script>

<style lang="scss">
.homepage {
	background-color: #f5f5f5;
	height: 100vh;
	overflow: hidden;
	
	.scroll-view {
		width: 100%;
		box-sizing: border-box;
		
		.movie-list {
			padding: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		
			.movie-item {
				width: 340rpx;
				margin-bottom: 30rpx;
				background: #fff;
				border-radius: 8rpx;
				overflow: hidden;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
		
				.movie-info {
					padding: 16rpx;
		
					.movie-name {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						display: block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 8rpx;
					}
		
					.movie-meta {
						font-size: 24rpx;
						color: #666;
						display: block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						margin-bottom: 8rpx;
					}
		
					.movie-desc {
						font-size: 24rpx;
						color: #999;
						display: block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 8rpx;
					}
		
					.movie-score {
						display: flex;
						align-items: center;
		
						.score-text {
							font-size: 24rpx;
							color: #ff9900;
							margin-left: 8rpx;
						}
					}
				}
			}
		}
	}
}
</style>
